<template>
  <div>
    <!--    添加角色-->
    <yj-dialog
      :modal="dialog.modal"
      :width="dialog.width"
      :title="dialog.title"
      :dialogVisible="dialog.visible"
    >
      <template slot="dialog-content">
        <el-form
          :model="form"
          :rules="roles"
          ref="form"
          size="mini"
          label-width="150px"
        >
          <el-form-item label="任务名称" prop="jobName">
            <el-input required v-model="form.jobName"></el-input>
          </el-form-item>
          <el-form-item label="任务分组" prop="jobGroup">
            <el-input v-model="form.jobGroup"></el-input>
          </el-form-item>

          <el-form-item label="执行目标字符串" prop="invokeTarget">
            <el-input v-model="form.invokeTarget"></el-input>
            <div>
              <div>
                <span class="el-icon-warning"></span> testTask.testTask()
              </div>
              <div>
                <span class="el-icon-warning"></span>
                Class类调用示例：cn.yj.quartz.testTask.TestTaskJob.testTask('test')
              </div>
              <div>
                <span class="el-icon-warning"></span>
                参数说明：支持字符串，布尔类型，长整型，浮点型，整型
              </div>
            </div>
          </el-form-item>

          <el-form-item label="执行规则" prop="cronExpression">
            <el-input v-model="form.cronExpression"></el-input>
            <div>
              <div><span class="el-icon-warning"></span> 例如：*/5 * * * * ?</div>
            </div>
          </el-form-item>

          <el-form-item label="执行策略" prop="misfirePolicy">
            <!-- <el-input v-model="form.cronExpression"></el-input> -->
            <el-radio-group v-model="form.misfirePolicy">
              <el-radio label="1">立即触发执行</el-radio>
              <el-radio label="2">触发一次执行</el-radio>
              <el-radio label="3">不触发立即执行</el-radio>
              <el-radio label="0">不执行</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="任务状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio label="0">正常</el-radio>
              <el-radio label="1">停止</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="允许并发" prop="concurrent">
            <el-radio-group v-model="form.concurrent">
              <el-radio :label="true">允许</el-radio>
              <el-radio :label="false">拒绝</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="form.remark"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" style="text-align: center" class="dialog-footer">
          <el-button size="mini" @click="cancelDilogBtn">取 消</el-button>
          <el-button size="mini" type="primary" @click="saveDilogBtn('form')"
            >确 定</el-button
          >
        </div>
      </template>
    </yj-dialog>

    <table-frame
      ref="frame"
      :getDataUrl="prop.getDataUrl"
      :removeUrl="prop.removeUrl"
      :searchShow="prop.searchShow"
      :operateShow="prop.operateShow"
      :location="prop.location"
      :searchModel="prop.searchModel"
      :reloadTable="prop.reloadTable"
      :colunmsCount="prop.colunmsCount"
      :isPage="prop.isPage"
      :delBtnPermission="prop.delBtnPermission"
      :removeKey="prop.removeKey"
      :showDelBtn="prop.showDelBtn"
    >
      <template slot="top_operate" slot-scope="currentRow">
        <auth :code="permission.add">
          <template slot="auth">
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="showAdd()"
              size="mini"
              >添加</el-button
            >
          </template>
        </auth>
        <auth :code="permission.update">
          <template slot="auth">
            <el-button
              type="success"
              icon="el-icon-edit"
              @click="editShow(currentRow.slotScope)"
              size="mini"
              >修改
            </el-button>
          </template>
        </auth>
      </template>

      <template slot="columns">
        <el-table-column
          prop="jobName"
          show-overflow-tooltip
          align="center"
          label="任务名称"
        />
        <el-table-column
          prop="jobGroup"
          show-overflow-tooltip
          align="center"
          label="任务分组"
        />
        <el-table-column
          prop="invokeTarget"
          show-overflow-tooltip
          width="150"
          align="center"
          label="目标字符串"
        />
        <el-table-column
          prop="cronExpression"
          show-overflow-tooltip
          width="150"
          align="center"
          label="执行规则"
        />
        <el-table-column
          prop="misfirePolicy"
          width="200"
          align="center"
          label="执行策略"
        >
          <template slot-scope="scope">
            {{ MISFIRE[scope.row.misfirePolicy] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="concurrent"
          align="center"
          label="是否允许并发"
        >
          <template slot-scope="scope">
            {{ scope.row.concurrent ? "允许" : "不允许" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          align="center"
          label="执行状态"
        >
          <template slot-scope="scope">
            {{ scope.row.status == 0 ? "进行中" : "停止" }}
          </template>
        </el-table-column>

        <el-table-column
          prop="remark"
          align="center"
          label="备注"
        >
          <template slot-scope="scope">
            {{ scope.row.remark}}
          </template>
        </el-table-column>

        <el-table-column
          show-overflow-tooltip="true"
          sortable
          prop="createTime"
          align="center"
          label="创建时间"
        />

        <el-table-column
          show-overflow-tooltip="true"
          sortable
          prop="updateTime"
          align="center"
          label="更新时间"
        />
      </template>

      <template slot="operate">
        <el-table-column fixed="right" align="center" label="操作" width="250">
          <template slot-scope="scope">
            <auth :code="permission.run">
              <template slot="auth">
                <el-button
                  icon="el-icon-refresh"
                  type="text"
                  @click="run(scope.row.jobId)"
                  size="mini"
                  >执行一次
                </el-button>
              </template>
            </auth>
            <auth :code="permission.pause">
              <template slot="auth">
                <el-button
                  icon="el-icon-video-pause"
                  type="text"
                  v-if="scope.row.status == 0"
                  @click="pause(scope.row.jobId)"
                  size="mini"
                >
                </el-button>
              </template>
            </auth>

            <auth :code="permission.resumeJob">
              <template slot="auth">
                <el-button
                  icon="el-icon-video-play"
                  type="text"
                  v-if="scope.row.status == 1"
                  @click="resumeJob(scope.row.jobId)"
                  size="mini"
                >
                </el-button>
              </template>
            </auth>

            <auth :code="permission.update">
              <template slot="auth">
                <el-button
                  icon="el-icon-edit-outline"
                  type="text primary"
                  @click="showEdit(scope.row)"
                  size="mini"
                >
                </el-button>
              </template>
            </auth>
            <auth :code="permission.remove">
              <template slot="auth">
                <el-button
                  icon="el-icon-delete"
                  type="text"
                  @click="del(scope.row.jobId)"
                  size="mini"
                >
                </el-button>
              </template>
            </auth>
          </template>
        </el-table-column>
      </template>
    </table-frame>
  </div>
</template>
<script>
let _this = {};
import searchModel from "./Search.vue";

export default {
  data() {
    return {
      dialog: {
        width: "50%",
        title: "新增/修改",
        visible: false,
        modal: true,
      },

      form: {
        jobId: "",
        jobName: "",
        jobGroup: "",
        status: "0",
        misfirePolicy: "1",
        cronExpression: "",
        invokeTarget: "",
        remark: "",
        concurrent: false,
      },
      roles: {
        jobName: [{ required: true, message: "请输入名称", trigger: "blur" }],
        jobGroup: [
          { required: true, message: "请输入分组名称", trigger: "blur" },
        ],
        invokeTarget: [
          { required: true, message: "请输入目标字符串", trigger: "blur" },
        ],
        cronExpression: [
          { required: true, message: "请输入cron表达式", trigger: "blur" },
        ],
      },
      prop: {
        searchShow: true,
        operateShow: true,
        getDataUrl: "/quartz/list",
        removeUrl: "/quartz/remove/?",
        searchModel: searchModel,
        reloadTable: false,
        showDelBtn: true,
        isPage: true,
        delBtnPermission: "quartz:del",
        removeKey:'jobId'
      },

      STATUS: {
        0: "进行中",
        1: "停止",
      },
      MISFIRE: {
        0: "默认",
        1: "立即触发执行",
        2: "触发一次执行",
        3: "不触发立即执行",
      },

      // 权限Code
      permission: {
        add: "quartz:add",
        remove: "quartz:del",
        update: "quartz:update",
        run: "quartz:run",
        pause: "quartz:pause",
        resumeJob: "quartz:resumeJob",
      },

      URL: {
        save: "/quartz/save",
        update: "/quartz/update",
        remove: "/quartz/remove/?",
        pause: "/quartz/pause/?",
        run: "/quartz/run/?",
        resumeJob: "/quartz/resumeJob/?",
      },
    };
  },
  created() {},
  methods: {
    showAdd() {
      this.dialog.visible = true;
      this.setDataToForm(this.form);
    },
    editShow(rows) {
      if (rows.rows.length > 1 || rows.rows.length < 1) {
        this.$warning("请选择一条");
        return;
      }
      this.showEdit(rows.rows[0]);
    },
    showEdit(row) {
      this.dialog.visible = true;
      this.setDataToForm(row);
    },
    cancelDilogBtn() {
      this.dialog.visible = false;
    },
    saveDilogBtn(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (
            this.form.jobId != undefined &&
            this.form.jobId != null &&
            this.form.jobId != ""
          ) {
            this.update();
          } else {
            this.save();
          }
        } else {
          this.$warning("参数必填");
          return false;
        }
      });
    },
    save() {
      this.$postJson(this.URL.save, this.form).then((res) => {
        if (res.R) {
          this.reqResult(res);
        }
      });
    },
    update() {
      this.$put(this.URL.update, this.form).then((res) => {
        if (res.R) {
          this.reqResult(res);
        }
      });
    },
    del(id) {
      this.$confirm("此操作将永久删除已选数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$del(this.URL.remove.replace("?", id), {}).then((res) => {
          if (res.R) {
            this.$success("已删除");
            this.reloadTable();
          }
        });
      });
    },
    pause(jobId) {
      this.$post(this.URL.pause.replace("?", jobId), {}).then((res) => {
        if (res.R) {
          this.$success("任务已停止");
          this.reloadTable();
        }
      });
    },

    resumeJob(jobId) {
      this.$post(this.URL.resumeJob.replace("?", jobId), {}).then((res) => {
        if (res.R) {
          this.$success("任务已启动");
          this.reloadTable();
        }
      });
    },
    run(jobId) {
      this.$post(this.URL.run.replace("?", jobId), {}).then((res) => {
        if (res.R) {
          this.$success("任务已执行");
          this.reloadTable();
        }
      });
    },
    reqResult(res) {
      if (res.R) {
        this.$success("操作成功");
        this.dialog.visible = false;
        this.setDataToForm(this.form);
        this.reloadTable();
      }
    },
    setDataToForm(row) {
      if (row != null) {
        for (const key in row) {
          if (row.hasOwnProperty(key)) {
            const element = row[key];
            if (this.form.hasOwnProperty(key)) {
              this.form[key] = element;
            }
          }
        }
      } else {
        for (const key in this.form) {
          if (this.form.hasOwnProperty(key)) {
            this.form[key] = "";
          }
        }
      }
    },
    reloadTable() {
      _this = this;
      this.prop.reloadTable = true;
      setTimeout(() => {
        _this.prop.reloadTable = false;
      }, 1000);
    },
  },
};
</script>
<style>
</style>
